【後轉前要多久】# Day17 BootStrap - 介紹、導入

13th鐵人賽

gjlmotea

2021-10-02 23:52:51

2303 瀏覽

分享至

個人主要是看金魚都能懂的Bootstrap影片學習BootStrap的，
比起看文件的方式學習，金魚有帶很多比較有趣的範例及常見排版，
但CSS樣式及BootStrap，我覺得最重要的還是自己練習過才會更加精熟。

BootStrap

BootStrap是透過CSS和JS寫成的一包library，
載入後可以透過library中存在的class直接來套用CSS樣式，
搭配上對應的HTML使用就能組成元件了。

BootStrap可以想像成，
假如你平常有自己實做一些小元件、自己刻寫CSS，
當刻了好幾次之後，就發現很多元件大同小異，
比方說: 連結導覽列、按鈕、頁碼
這邊用到、那邊也用的到，基本上都是同樣的外觀形式

又或者寫了幾次後，發現其實每個網站都有各自的顏色風格，
連結導覽列、按鈕、頁碼的顏色，只要在同一個網站上，都是那兩三種顏色在變化
最後就把顏色抽出來另外寫

而外存下來或者抽出來寫，下次用到時就直接複製過來用、小改一下，
就能很快達成需求啦~
BootStrap就是類似這樣眾人的經驗產物

BootStrap box-sizing

BootStrap 使用box-sizing: border-box
定義width、height就是實際呈現長寬，
border與padding列入其中會自動按比例計算，
而margin不在計算範圍內，但仍向外擴張。

版本4與5差異

BootStrap 4 的部分JS功能是依賴於jQuery的。

但BootStrap5 完全捨棄掉了 jQuery，
也等於是捨棄掉了對IE11瀏覽器的支援。

Bootstrap 5 is designed to be used without jQuery.

引入方式

BootStrap引入方式分成兩種(基本上所有網頁套件引入方式都分成這兩種)

方法1 CDN連結

把CDN網址加入到html <head>中，透過CDN連結引入，
當有人要瀏覽你的網站時，瀏覽器會先去下載CDN連結中的library回來。

參考 v4.6版本、v5.1版本

JS分成Bundle及Separate兩種版本，
Separate是把必要用到的套件獨立開來放，(v5用到popper、v4用到jquery及popper)
而Bundle是把Separate合在一塊，所必要用到的套件都在這裡面了

在此以v5.1做示範

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>

...

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>

優點: 不用自己將Bootstrap載下來；加一兩行程式碼就搞定bootstrap的載入
缺點: CDN不是自己的，沒辦法修改客製化library。CDN會不會有連不上、或者安全性上的考量?

方法2 下載到本地中引入

也可以將整包BootStrap下載下來，放到專案裡面。
載下來後，因為library在本地，可以隨意修改。

參考 v4.6版本、v5.1版本

按Compiled CSS and JS下載 (Source files需再透過SASS編譯後才能使用)

載到本地
載下來會發現有這麼多的檔案。

優點: 可以客製化library。
缺點: 多了一些步驟。在第一次傳輸時可能比CDN還慢(因CDN有cache機制)

一開始學習建議把整包bootstrap載下來使用

沒方向要從哪裡開始?

以v5.1為例，

載下來後，css資料夾內有這麼多個檔案
bootstrap.css
bootstrap.rtl.css
bootstrap-grid.css
bootstrap-grid.rtl.css
bootstrap-reboot.css
bootstrap-reboot.rtl.css
bootstrap-utilities.css
bootstrap-utilities.rtl.css
要從哪裡開始？

CSS其實只要留bootstrap.css這個檔案就可以了，
因為bootstrap.css裡面已經包含所有其他如 grid、reboot、utilities版本的css。

min版本是把程式碼排版換行、空白全部刪除，經過壓縮降低檔案大小的版本
其他的例如 bootstrap.css.map、bootstrap.min.css、bootstrap.min.css.map 這些資料都可以先刪除，
以降低一次接觸太多的新東西的恐慌程度。

另外JS也是，只留bootstrap.bundle.js就好，其餘刪除。

刪光光之後只會留下這兩個檔案，看起來心情舒暢許多

只會留下這兩個檔案

之後試試看以下的程式碼，新增一個div.container

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>

<div class="container"></div>

</body>
</html>

使用Webstorm IDE的話，按下ctrl+左鍵就可以導到有出現container位置的CSS去了，
在開發時，有助於我們查看BootStrap內到底寫了些什麼樣的CSS樣式。

webstorm